<!--
 * @Author: hu_binbin
 * @Date: 2021-08-20 09:21:53
 * @LastEditTime: 2021-08-24 15:24:10
 * @Description: 信息查询首页
-->

<template>
    <article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#fff'}" :textStyle="{color:'#fff'}"
                :titleStyle="{color:'#fff'}">
                <template slot="header_arrow">
                    <van-icon size="25" name="arrow-left" @click="$pageBack" />
                </template>
            </Theader>
        </div>
        <div style="overflow-y: auto;height: calc(100% - 60px);">
            <div class="bg-cen"></div>
            <div class="menus">
                <div class="menus-item" @click="deviceRecordSearch">
                    <div class="menus-item-l">
                        <van-image width="40" height="40" :src="icon.infoTaizhang"></van-image>
                    </div>
                    <div class="menus-item-r">设备台账查询</div>
                </div>
                <div class="menus-item">
                    <div class="menus-item-l">
                        <van-image width="40" height="40" :src="icon.infoZhiban"></van-image>
                    </div>
                    <div class="menus-item-r">运维值班查询</div>
                </div>
                <div class="menus-item" @click="gotoTaskPlan">
                    <div class="menus-item-l">
                        <van-image width="40" height="40" :src="icon.infoPlan"></van-image>
                    </div>
                    <div class="menus-item-r">巡视计划查询</div>
                </div>
                <div class="menus-item" @click="gotoDefectDanger">
                    <div class="menus-item-l">
                        <van-image width="40" height="40" :src="icon.infoDefect"></van-image>
                    </div>
                    <div class="menus-item-r">缺陷隐患查询</div>
                </div>
                <div class="menus-item" @click="gotoTrobleList">
                    <div class="menus-item-l">
                        <van-image width="40" height="40" :src="icon.infoTrouble"></van-image>
                    </div>
                    <div class="menus-item-r">故障信息查询</div>
                </div>
            </div>
        </div>

    </article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    export default {
        name: 'queryInfoMenu',
        components: {
            Theader,
        },
        data() {
            return {
                active: 0,
                title: "信息查询",
                icon: {
                    rfid: require('../../../../assets/tour/rifid.png'),
                    scan: require('../../../../assets/tour/scan.png'),

                    infoDefect: require('../../../../assets/tour/info-defect.png'),
                    infoPlan: require('../../../../assets/tour/info-plan.png'),
                    infoTaizhang: require('../../../../assets/tour/info-taizhang.png'),
                    infoTrouble: require('../../../../assets/tour/info-trouble.png'),
                    infoZhiban: require('../../../../assets/tour/info-zhiban.png'),
                },
            }
        },

        computed: {

        },

        methods: {
            /**
            * @description: rifid
            * @param {*}
            * @return {*}
            */
            rfidBtn() {

            },
            /**
             * @description: 扫一扫
             * @param {*}
             * @return {*}
             */
            scanBtn() {

            },
            showScreenPage() {

            },
            /**
             * @description: 返回
             * @param {*}
             * @return {*}
             */
            back() {
                history.go(-1)
            },
            /**
             * @description: 缺陷隐患列表页
             * @param {*}
             * @return {*}
             */
            gotoDefectDanger() {
                this.$router.push({
                    name: 'defectDangerList'
                })
            },
            /**
             * @description: 设备台账查询
             * @param {*}
             * @return {*}
             */
            deviceRecordSearch() {
                this.$router.push({
                    name: 'deviceRecordSearch'
                })
            },
            gotoTaskPlan() {
                this.$router.push({
                    name: 'queryTourPlanList'
                })
            },
            /**
             * @description: 跳转故障列表页面
             * @param {*}
             * @return {*}
             */
            gotoTrobleList() {
                this.$router.push({
                    name: "troubleList"
                })
            }
        },

        watch: {

        },
        mounted() {

        },
        created() {

        },

    }
</script>

<style scoped>
    article {
        height: 100vh;
    }

    .bg_4dbfae {
        background: #F4F5F6 !important;
    }

    .title-bg {
        height: 45px;
        width: 100%;
        background: #10B296;
    }

    .bg-cen {
        height: 85px;
        width: 100%;
        background: #10B296;
    }

    .menus {
        position: relative;
        top: -5rem;
    }

    .menus-item {
        margin: 1rem;
        background: #fff;
        display: flex;
        align-items: center;
        font-size: 1rem;
        padding: 2.5rem;
        border-radius: 0.7rem;
    }

    .menus-item-l {
        display: flex;
        width: 30%;
        justify-content: center;
    }
</style>